<template>
	<view v-if="showModal" :class="['cover', ani]" @tap.stop="bindMaskTap">
		<view :class="['bg', ani]" @tap.stop="()=>{}">
			<view class="title" :style="'font-size:' + titleSize +';'+'color:' + titleColor + ';'">
				{{title}}
			</view>
			<view class="content-text">
				<slot>
					<view class="text">
						<text >{{content}}</text>
					</view>
				</slot>
			</view>
			<view class="btn">
				<view :class="!showConfirmButton ? 'btn-item-one' : 'btn-item'" v-if="showCancelButton" :style="'color:' + cancelColor + ';'" @tap="bindCancelTap">
					<text>{{cancelText}}</text>
				</view>
				<view :class="!showCancelButton ? 'btn-item-one' : 'btn-item'" :style="'color:' + confirmColor + ';'" v-if="showConfirmButton" @tap="confirm">
					<text>{{confirmText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-modal",
		props: {
			/* 标题 */
			title: {
				type: String,
				default: 'title',
			},
			/* 标题字体大小 */
			titleSize:{
				type: Number,
				default: 36,
			},
			/* 标题文字颜色 */
			titleColor:{
				type:String,
				default:'#606266'
			},
			/* 内容 */
			content:{
				type:String,
				default:'这里是内容'
			},
			/* 是否显示取消按钮 */
			showCancelButton:{
				type:Boolean,
				default:true
			},
			/* 是否显示确定按钮 */
			showConfirmButton:{
				type:Boolean,
				default:true
			},
			/* 取消按钮文字内容 */
			cancelText:{
				type:String,
				default:'取消'
			},
			/* 确定按钮文字内容 */
			confirmText:{
				type:String,
				default:'确定'
			},
			/* 确定按钮字体颜色 */
			confirmColor:{
				type:String,
				default:'#2979ff'
			},
			/* 取消按钮文字颜色 */
			cancelColor:{
				type:String,
				default:'#606266'
			}
		},
		data() {
			return {
				showModal: false,
				ani: '',
			}
		},
		methods: {
			show(options) {
				if (options) {
					this.showModal = true
					this.$nextTick(() => {
						setTimeout(() => {
							this.ani = 'ani'
						}, 30)
					})
				} else {
					this.ani = ''
					this.$nextTick(() => {
						this.$emit('cancel')
						setTimeout(() => {
							this.showModal = false
						}, 300)
					})
				}
			},
			bindCancelTap(){
				this.ani = ''
				this.$nextTick(() => {
					this.$emit('cancel')
					setTimeout(() => {
						this.showModal = false
					}, 300)
				})
			},
			bindMaskTap(){
				this.ani = ''
				this.$nextTick(() => {
					this.$emit('mask')
					setTimeout(() => {
						this.showModal = false
					}, 300)
				})
			},
			confirm() {
				this.ani = ''
				this.$nextTick(() => {
					this.$emit('confirm')
					setTimeout(() => {
						this.showModal = false
					}, 300)
				})
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	// @charset "UTF-8";
	.cover {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, .4);
		opacity: 0;
		transition: all .3s;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cover.ani {
		opacity: 1;
	}

	.bg {
		width: 600rpx;
		opacity: 0;
		transition: all .3s;
	}

	.bg.ani {
		width: 600rpx;
		opacity: 1;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.content-text {
		width: 100%;
		.text{
			width: 100%;
			text-align: center;
			padding: 36rpx;
			font-size: 30rpx;
			box-sizing: border-box;
		}
		
	}

	.title {
		padding: 20rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		.btn-item {
			min-width: 50%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #efefef;
			border-left: 1rpx solid #efefef;
			&:first-child{
				border-left: none;
				// color: #999;
			}
		}
		.btn-item-one{
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #efefef;
		}
	}
</style>
